<template>
  <div class="box">
    <div class="cont">
      <div class="cont-item" @click="openDetail(item.id)" v-for="(item) in item" :key="item.id">
        <img :src="item.titleImage" alt="" />
        <h3>{{ item.title }}</h3>
        <span>{{ item.description }}</span>
        <div class="tag">
          <p
            v-for="item in item.tags"
            :key="item.id"
            v-show="item.name"
          >
            {{ item.name }}
          </p>
        </div>
      </div>
    </div>
    <el-pagination
      @current-change="pageChange"
      :page-size="list.size"
      :current-page="list.current"
      layout="prev, pager, next"
      :total="list.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { Start } from "../units/api.js";
export default {
  data() {
    return {
      articleId:"",
      item: [],
      list: {
        current: 1,
        size: 10,
        total: 1,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // sendData(){
    //   this.$emit("")
    // },
    async getList() {
      let res = await Start(this.list);
      console.log("这里是获取的列表", res);
      if (res.status == 200) {
        console.log(111);
        this.item = res.data.data;
        this.list.total = res.data.total;
        console.log(this.item);
      }
    },
    pageChange(val) {
      // console.log(this.list.current);
      console.log(val);
      this.list.current = val;
      this.getList();
    },
    openDetail(id){
      this.$router.push({path:'detail',query:{articleId:id}})
      console.log("这里是ID",id);
      
    }
  },
};
</script>

<style scoped>
.box {
  box-sizing: border-box;
}
.cont {
  width: 68vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.cont-item {
  padding: 10px;
  margin-top: 1vw;
  margin-bottom: 2vw;
  width: 32vw;
  border: 1px solid #b5b5b5;
  border-radius: 8px;
  background-color: white;
}
.cont-item > img {
  /* width: 390px; */
  height: 200px;
}
.tag {
  display: flex;
  flex-wrap: wrap;
}
.tag > p {
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 5px;
  background-color: #b5b5b5;
  border-radius: 8px;
}
</style>